<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/datapicker/datepicker3.css}" rel="stylesheet"/>
<body class="gray-bg">

	<div class="container-div ui-layout-center" >
		<div class="row" style="height:400px;">
			<div class="col-sm-6"  style="padding:0 7px;">
				<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
				<!-- <div class="row" style="padding:0 5px;">
					<div class="col-sm-5" style="font-size:18px;font-weight: 700;color: #000;">BG骨干统计</div>
					<label class="col-sm-3 control-label " style="padding: 0;line-height: 34px;text-align:right;">交付中心：</label>
					<div class="col-sm-4" >
						 <select id="buData" name="buData" class="form-control m-b">
							<option th:each="plan : ${planList}" th:text="${plan['plan_cfg_name']}" th:value="${plan['plan_cfg_id']}"></option>
						</select> 
					</div>
				</div> -->
				<div id="chartPlan" style="width:100%;height:370px;"></div>
				</div>
			</div>
			<div class="col-sm-6"   style="padding:0 7px;">
				<div style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
					<!-- <div class="row" style="padding:0 5px;">
						<div class="col-sm-4" style="font-size:18px;font-weight: 700;color: #000;">BG骨干类型</div>
						<label class="col-sm-3 control-label " style="padding: 0;line-height: 34px;text-align:right;">交付中心：</label>
						<div class="col-sm-5" >
							 <select id="buTime" name="buTime" class="form-control m-b" multiple=" multiple" >
							 	<option value="54" selected="true">21</option>
							 	<option value="45t4r242" >341</option>
							 	<option value="4e" >r43</option>
							 	<option value="45t4242" >653</option> 
							 </select> 
						</div>
					</div> -->
					<div id="chartDept" style="width:100%;height:370px;"></div>
				</div>
				
			</div>
		</div>
		<div class="row" style="margin:7px -15px 15px -15px;height:420px;">
			<div class="col-sm-12"    style="height:420px;padding:10px 7px 0 7px;">
				<div style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
					<!-- <div class="row" style="padding:0 5px;">
						<div class="col-sm-6" style="font-size:18px;font-weight: 700;color: #000;">骨干数量月变化</div>
						<label class="col-sm-3 control-label " style="padding: 0;line-height: 34px;text-align:right;">交付中心：</label>
						<div class="col-sm-3" >
							 <select id="buType" name="buType" class="form-control m-b" multiple=" multiple" >
							 	<option value="54" selected="true">21</option>
							 	<option value="45t4r242" >341</option>
							 	<option value="4e" >r43</option>
							 	<option value="45t4242" >653</option> 
							 </select> 
						</div>
					</div> -->
					<div id="chartType" style="width:100%;height:420px;"></div>
				</div>
			</div>
		</div>
	</div>
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
	<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>
	<script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>
	<script th:src="@{/js/echarts.js}"></script>
	<script th:inline="javascript">
	
	bgPie();
	bgLineMonth();
	bgBarType();
	
	//pm查看骨干数量
	function bgPie(){
		
		var chartPlan = echarts.init(document.getElementById('chartPlan'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx + "statistic/pm/list/listByPie",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var BGdata={
						text:"骨干占比统计",
						legnedData:recvData.data,
						seriesData:recvData.serizeData
				}
				var option = {
					    title : {
					        text: BGdata.text,
					        x:'center'
					    }, 
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient: 'vertical',
					        left: 'left',
					        data: BGdata.legnedData
					    },
					    series : [
					        {
					            name: '骨干数量',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            data:BGdata.seriesData,
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
				};
				chartPlan.setOption(option);
				$(window).resize(function(){
					chartPlan.resize();
				})
			}
		});
	}
	//pm查看骨干类型
	function bgBarType(){
		var chartPlan = echarts.init(document.getElementById('chartDept'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx + "statistic/pm/list/listByBar",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var data={
						text:"骨干数量统计",
						xAixsData:recvData.data,
						seriesData:recvData.serizeData
				};
					var option1 = {
						title:{
							text:data.text,
							x:"center"
						},
						tooltip: {
							trigger: 'axis'
						},
						 grid: {
							left: '3%',
							right: '4%',
							bottom: '5%',
							containLabel: true
						}, 
						xAxis: {
							type: 'category',
							data:data.xAixsData
						},
						yAxis: {
							 splitLine:{show: false},
							type: 'value'
						},
						series:[{
						     name:"骨干数量",
						     data:data.seriesData ,
						     barWidth : 20,
						     type: 'bar',
						}]
					};
					chartPlan.setOption(option1);
					$(window).resize(function(){
						chartPlan.resize();
					})
			}
		});
	}
	//PM骨干月变化
	function bgLineMonth(){
		var chartPlan = echarts.init(document.getElementById('chartType'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx + "statistic/pm/list/listByLine",
			async : false,
			/* data:{
				data:$("#buTime").val();
			}, */
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var data={
						text:"骨干月变化",
						xAixsData:recvData.data,
						seriesName:"骨干数量",
						seriesData: recvData.serizeData
				};
				var option = {
						title:{
							text:data.text,
							x:"center"
						},
						 tooltip : {
						       trigger: 'axis',
						 },
						 grid: {
						        left: '2%',
						        right: '3%',
						        bottom: '3%',
						        containLabel: true
						    },
						 xAxis: {
						      type: 'category',
						      boundaryGap: false,
						      axisLabel:{
						    	  interval:0,
						    	  rotate:45
						      }, 
						      data: data.xAixsData
						 },
						 yAxis: {
						      type: 'value',
						      splitLine:{show: false}
						 },
						 series:[{
							     name:"骨干数量",
							     data:data.seriesData,
							     type: 'line',
					     }]
				 };
				 chartPlan.setOption(option);
				 $(window).resize(function(){
					 chartPlan.resize();
				 }) 
			}
		});
	}
	
	</script>
</body>
</html>